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A note on these slides: 

• This presentation was created in OpenOffice 2.0 
Impress and later converted to Powerpoint format. 
Some slides and fonts may look slightly funky as a 
result. You can download the original .odp file on my 
webpage, or watch the presentation in one of the other 
formats (PDF, Flash) to get the original experience. 

• Videos of the workflow presented in this talk are 
available for download. I recommend you watch the 
videos to get the most from this presentation. 

• The finished textures can be downloaded on my page. 
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MORE THAN JUST A PRETTY MAP 

Creating Next-Generation Materials for Lair 
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so, NORMAL MAPS... 




Are they...like, cool and stuff? 

(Do we need a session like this one in 2007?) 
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NORMAL MAP USE IN 2007 ^ 4|p 

\ 

r ; Large parts of the industry have adopted pixel 
shaders 

♦ Every team has artists that have worked with 
the technique 

♦ There's nothing more to talk about, right? 

♦ Right? 
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NORMAL MAP USE IN 2007 (CONTINU£I^||||^ 

\ 

♦ If we are all using normal maps on a daily 
basis, why are there so many bad-looking 
surfaces in various games? 
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NORMAL MAP USE IN 2007 


(CONTINUED) 



\ 


♦ 




In other words, why do we often see stuff like 
even in the visually most impressive games? 






That's actually a decent representative of the ''bad normal map" faction - but you 
get the drift. Every game has that one surface that pulls you out of the game. 
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TALK OUTLINE 



Part 1: Normal Map Basics 
Part 2: Efficient Normal Map Creation 
Part 3: Q&A 
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PART I: 

NORMAL MAP BASICS 
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NORMAL MAP DIRECTIONS 



\ 


,The three color channels of the RGB image 
correspond to the directions in a 3D Cartesian 
coordinate system: 


w- 


♦ Green = up/ down 

♦ Blue = in/ out 

♦ Handedness* of Red and Green not standardized 
(in some engines, the Red and Green colors are 
even swapped!) 

(*) which way the coordinate system is pointing 


A 1 R 


“More Than Just A Pretty Map” | Matthias Worch \ GDC 2007, San Francisco, CA 


FACrO^ 


NORMAL MAP DIRECTIONS ro™ 



The L is sticking 
out 

AllNmap 
backgrounds 
should be 
128, 128, 255 

Any normal map from different 
softw'are can be matched to this 
configuration by swapping the red and 
green c hann el and or inverting them. 



♦ Provide a artist chart 
identifying all directions 
and correct settings for 
extraction 


^..Mapper Transform , Morph Modas^ 

' ocal Light Faceted Morph . V 

Hide Opa ue Scale T Sp n Rece ter Free e At Target 

Background n Move tV diffuse Intensity Morph Speed 



Wires 

Screen 

Display 

Poly rame 

napshot i Object space N.Map 5 UV seams 

T nFrame 

"ispose 2 Tangent space N.Map ' Groups 

NormFra e 

Sa e 3 Normals ' 

t Tangents 




'"■‘mples 

Interpolate 


1 ^bd )e 

Smooth Normals 

reate NormalMap 

•g« 

Cavity Blur 


Cavity Intensity 

Create Cavi yMap 


The Factor 5 normal map chart 


Correct ZMapper settings for F5 normal maps 
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NORMAL MAP DIRECTIONS ,conx:^o, 


\ 

♦ Start looking at the individual color channels of 
your normal maps! 

♦ Correlate the colors to the three axis 

♦ Think about how you can use the information 
in each channel in related maps (see the 
workflow demo for an example) 
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NORMAL MAP DIRECTIONS ,conx:^o, 


\ 

♦ If your normal map does not match the chart, 
do not regenerate the entire map! 

♦ Instead, identify and select the incorrect color 
channel and invert that channel in Photoshop 

♦ Inverting a color channel can also me used to 
change the embossing (in or out) of details like 
ornaments 
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NORMAL MAP COMPRESSION ^ 49 

. « 

\ 

♦ DXT compression was created to make maps 
look good to the human eye! 

♦ Normal maps are not supposed to be pretty, 
they're supposed to be mathematically correct 

♦ Have you ever looked at the color channels of 
your DXT compressed normal maps? 
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NORMAL MAP COMPRESSION ,cir,N^ 






♦ It's not pretty... 
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NORMAL MAP COMPRESSION 

. « 

\ 

♦ In DXT compression, the Red and Blue channels 
suffer more than the Green channel 

♦ DXTl compression means 5-6-5bit depth for the 
RGB channels, stored in a 4x4 2bit lookup table 

♦ In normal maps, this leads to blocky artifacts (lookup 
table) and a loss of Red "up/ down" information 

♦ The alpha channel in a DXT5 texture is preserved 
better than the Red channel 
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NORMAL MAP COMPRESSION 

. « 

\ 

♦ Solution: Copy the Red channel of the normal 
map to the Alpha channel before compression 

♦ Compress as DXT5 

♦ Swizzle the Alpha into the Red channel 

♦ Drawback: DXT5 takes additional texture 
memory 
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COMBINING NORMAL MAPS ^ 

. % 

\ 

\ 

♦ Normal maps can be combined in Photoshop to 
bake high frequency detail onto big surfaces 

♦For example, you can bake a tiling rust normal 
map onto a full suit of armor without painting 
the entire surface with rust inside Zbrush 

♦ Be careful with rotated UV shells, the tiling 
detail map will assume different directions! 
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COMBINING NORMAL MAPS 


(CONTINUED)! 


Overlay a tiling rust map, 


Result 


Add big gashes, dents etc. in Zbrush. 
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COMBINING NORMAL MAPS (CQNTINU^l^p^ 

. « 

\ 

♦ We can't simply combine the two normal maps 
in one go! 

♦ We need to combine each color channel 
(direction) separately, then reassemble the map: 

♦ Overlay the and Green channels individually 

♦ Multiply the Blue channels 

♦ Copy all three channels into a new normal map 
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NORMAL MAP CONCLUSIONS/" 4IP 

. « 

\ 

♦ Normal maps are mathematically correct, but 
that doesn't mean that we can't fudge them 

♦ DXTl compression can decrease normal map 
quality, use DXT5 + swizzling for better results 

♦ Think about each color channel as a X/Y/Z 
direction and learn what to do with them 

♦Use the color channels of your normal map in 
other textures to match up all maps! 
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Which brings us to... 
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PART 2: 

EFFICIENT NORMAL MAP CREATION 
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TEXTURE LIBRARIES 



♦ Every game, be it sci-fi, urban or medieval, 
needs a library of reusable materials to texture 
the environment 
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TEXTURE LIBRARIES (CONTINUED) 






SoFtimage 

temp 

users 


AsyliaBrick03. . . AsyliaBrickD3, 


AsyliaGroun, . . AsyliaGroun, 


AsyliaGroun . . . AsyliaGroun . 


brickWallGen. , , brickWallGen. . , brickWallGen. 


brickWallGen. , , brickWallGen. . , brickWallGen. 


brickWallGen. 


brickWallGen. . . brickWallGen. . . brickWallGen. 


brickWallGen. 






AsyliaBrickOl... AsyliaBrickOl... AsyliaBrickOl... AsyliaBrickOl... AsyliaBrick02... AsyliaBrick02... AsyliaBrick02... 

. .... 


Asylia6rick02... AsyliaBrick02... AsyliaBrick02... AsyliaBrick03... 

; 




AsyliaBrick03... Asylia6rick03... Asylia6rick03... AsyliaBrick04,.. AsyliaBrickOl,.. AsyliaBrickOl.,. Asylia6rick04... AsyliaBrickOS... AsyliaBrickOS... AsyliaBrickOB... AsyliaBrickOB... AsyliaBrickOB... AsyliaBrickOB. 

._ .... , _ , 




.1 ..1, Ij^lg^ 




' . L iV 



AsyliaBrickO?. , , AsyliaBrick07. , , AsyliaBrick07. . , AsyliaBrick07, . . AsyliaBricksS, . . AsyliaBricksS, , . AsyliaBricksS, , . AsyliaBricksS. , , AsyliaGroun. . , 


AsyliaGroun. . . AsyliaGroun. . . 


m 


m::- 


If*''. ' ,, 


AsyliaGroun... 






III 


asyliaRubble... brickAdobeG... 

i-i :■ 

brickWallGen. . . brickWallGen, . . 


-sM fes 


brickMortarG... brickMortarG... brickMortarG... brickWallGen... brickWallGen... brickWallGen... brickWallGen... brickWallGen, 




brickWallGen, , . brickWallGen. , . brickWallGen. , , brickWallGen, 




brickWallGen... brickWallGen... 


brickWallGen, . . brickWallGen, . 


brickWallGen... 




brickWallGen. , . brickWallGen. , , brickWallGen. , , brickWallGen. . , brickWallGen. . 
1 f r- -t n — 1 1 1— 
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brickWallGen.,, brickWallGen... brickWallGen... brickWallGen... brickWallGen... brickWallGen,, . brickWallGen... brickWallGen... brickWallGen., , brickWallGen... brickWallGen... 


brickWallGen... 


■ *.'-A 


brickWallGen. . , brickWallGen, . . brickWallGen, . . brickWallGen, , 


^ j,: 1.- I 

brickWallGen. . . brickWallGen. . . 


..’I 


nr" r--v 
brickWallGen,, . 


brickWallGen. . . brickWallGen. . . brickWallGen. . . brickWallGen. . . brickWallGen. . . 


H 

P^l 

brickWallGen... 

brickWallGen... 

1^ " ■ ,j 

■■ '■ 

brickWallGen... 

brickWallGen,. , 

18 

( 1' 

brickWallGen... 

brickWallGen... 



brickWallGen... 

brickWallGen,. , 

■ ■ 

brickWallGen... 

brickWallGen... 


WINDOWS 

a(D:) 


B 1^ Bricks 
B 1 ^ Asylia 


L A 
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As an example, this is a partial view of the brick directory for Lair 


FAcra=i 




TEXTURE LIBRARIES (CONTINUED) 


\ 

♦ Bad library surfaces usually creep in because of 
volume and time constraints 

♦Asa solution, we need to introduce workflows 
that quickly create good-looking surfaces 

♦ To do so, we might have to change the way 
artists go about creating texture libraries 
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THE CHALLENGE 


\ 

♦ Create a library of real world surfaces (in this 
case brick) in a short amount of time 

♦ Create good-looking assets that hold up to close 
scrutiny 

♦ Keep the process fast enough to be feasible in 
production 
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ARTIST S INSTINCTS 


\ 

♦ Dig into reference library and pick visually 
pleasing source art 

♦ Create the color map 

♦ Convert photo to grayscale to get displacement 
map 

♦ Create normal map based on the grayscale 
image 
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WHY THE APPROACH WON‘T^ 
WORK 




Color images never contain correct height 
information 


There's always some directional light/ shadow 
information 


Converted grayscale images usually come out 
too busy 
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THE SOLUTION 


\ 

♦ Create light-neutral color map 

♦ Rebuild all height information from good 
displacement (scan) data 

♦ Match up the color map to the new height 
information 

♦ Keep the process fast enough to work in 
production 
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LAIR PRODUCTION CHALLENGES A 

\ 

♦ We can see for miles, and the dragon can fly 
anywhere within a heart beat and get an up- 
close look at something 

♦ Even though mission based, need to author like 
open world game because the world is so big 

♦ Thus, our process should be applicable to many 
other genres, i.e. first-person shooters and RPGs 
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LAIR PRODUCTION CHALLENGES 



60000 
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We need to fill an environment like this with bricks 
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WORKFLOW DEMO 




Please download and watch the workflow videos 
for much more detail on the following slides. 
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WORKFLOW DEMO (CONTINUED) 


\ 

♦ Remove all directional light information (which 
in turn describes the height information of the 
surface) 
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WORKFLOW DEMO (CONTINUED) 


\ 

♦ Mask out the cracks between the bricks to start 
the displacement map 
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DISPLACEMENT DATA 




\ 

. ♦ Use real height data of rocks to rebuild the 
displacement information of the bricks 

♦ Height data can come from various sources: 

♦ Using an in house scanner to scan real-world rocks (Factor 5 
uses a Polhemus Fastscan for this) 

♦ Purchasing scan data: Visit XYZRGB.com for samples. You 
can also email matthias@factor5.com if interested. 

♦ Height data is very versatile, try different 
sources for seemingly unrelated materials 
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DISPLACEMENT DATA (CONTINUED) 


\ 
a 

company for many years and multiple projects 

♦ The same displacement data can be reused in 
different textures without being easily 
noticeable 

♦ In our example, we will use scanned sheet rock 
from a home improvement store: 




displacement library benefits the 
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WORKFLOW DEMO (CONTINUED) 




^;Fill in the shapes, round off the edges to get a 
hatural, chiseled look 


♦ Extract your normal map based on the height 
map 








1 


1 

1 

1 
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WORKFLOW RESULTS 
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WORKFLOW RESULTS (CONTINUED) 


\ 

♦ Don't judge the individual maps by prettiness - 
make sure that the combined result looks good 
in the pixel shader! 

♦We usually over crank our maps (depth etc.) to 
look good in our (flight) games 

♦ For added up-close detail use a second, tiling 
normal map as detail map 
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WORKFLOW RESULTS 


(CONTINUED) 


\ 

Fot anything but hero surfaces, we don't need 
to treat every brick individually 

We can overlay the mask of the cracks on top of 
a tiling displacement map and get good results 
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WORKFLOW RESULTS (CONTINUED) 



♦ The same basic idea also works for other 
surface types (i.e. wood) 
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Workflow videos end here. 
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FINAL THOUGHTS 



♦ Please fill out the feedback forms! Thanks! 

♦ Theses slides, as well as workflow videos and 
the final texture will be available at 

http:/ / www.worch.com/ gdc 
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FINAL THOUGHTS (CONTINUED) 


. « 


\ 

♦ Other talks that might interest you: 

♦ "Cross Application Asset Creation for LAIR: From 
Characters to Clouds" 

(Mark Teare) 

Friday, 9:00am-10:00am - Room 135, North Hall 

* "RSX Best Practices" 

(Mark Cerny, Jon Olick and David Simpson) 

Thursday, 2:30pm-3;30pm - Room 3001, West Hall 
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AND NOW IS THE TIME ON ^ 
SPROCKETS WHEN WE DANCE! 




(Alternatively, we can take some time for a Q&A.) 
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